<template>
	<view>
		<div class="img">
			<image src="../../static/index/编组 7@2x.png" mode="widthFix"></image>
		</div>
		<div class="box">
			<div class="li" v-if="sh" v-for="(time, index) in list" :key="index" @click="copy(index)">
				<div class="top">{{ time.name }}</div>
				<div class="money"><span>￥</span>{{ time.priceFee | formatDecimal}}</div>
				<div class="text">原价 {{ time.displayFee | formatDecimal}}元</div>
				<div class="btn">
					<image :src="'../../static/index/'+time.nickName+'.png'" mode="widthFix"></image>
					{{ time.nickName }}
				</div>
			</div>
			<div class="li2" v-if="!sh" v-for="(time, index) in list" :key="index" @click="copy(index)">
				<div class="top">{{ time.name }}</div>
				<div class="money"><span>￥</span>{{ time.priceFee | formatDecimal}}</div>
				<div class="text">原价 {{ time.displayFee | formatDecimal}}元</div>
				<div class="btn">
					<image :src="'../../static/index/'+time.nickName+'.png'" mode="widthFix"></image>
					{{ time.nickName }}
				</div>
			</div>
		</div>
		<div class="announce">{{phone}}</div>
		<div class="btnO" @click="detriment(con)">立即开通</div>
		<div class="cont">



		</div>
		<image style="width: 100%;" src="../../static/总.png" mode="widthFix"></image>
		<!-- <div class="ul">
			<div class="title">- 基础权益 -</div>
			<div class="text">乌豚邦所有代理用户都可享受哦</div>
			<div class="boxs">
				<div class="li">
					<image src="../../static/logo.png" mode="widthFix"></image>
					<div class="name">佣金提现</div>
				</div>
				<div class="li">
					<image src="../../static/logo.png" mode="widthFix"></image>
					<div class="name">佣金消费</div>
				</div>
				<div class="li">
					<image src="../../static/logo.png" mode="widthFix"></image>
					<div class="name">活动奖励</div>
				</div>
				<div class="li">
					<image src="../../static/logo.png" mode="widthFix"></image>
					<div class="name">专属顾问</div>
				</div>
				<div class="li">
					<image src="../../static/logo.png" mode="widthFix"></image>
					<div class="name">培训支持</div>
				</div>
				<div class="li">
					<image src="../../static/logo.png" mode="widthFix"></image>
					<div class="name">系统支持</div>
				</div>
			</div>
			<div class="title2">- 尊贵掌门专享 -</div>
			<div class="text">乌豚邦所有代理用户都可享受哦</div>
		</div> -->
	</view>
</template>

<script>
	import Api from "../../API/api";
	import jWeixin from "jweixin-module";

	export default {
		data() {
			return {
				list: [],
				con: 0,
				sh: true,
				phone:""
			};
		},
		onShow() {
			this.generateMaskedPhoneNumber();
			setInterval(this.generateMaskedPhoneNumber,3500);
		},
		onLoad() {
			Api.getAgent().then(res => {
				this.list = res.data
				// console.log(res.data)
				this.con = this.list[0].id;
			})
			
			
		},
		filters: {
			formatDecimal(value) {
				if (Number.isInteger(value)) {
					return value.toFixed(0); // 如果是整数，不显示小数点和小数位数
				} else {
					return value.toFixed(2); // 如果有小数部分，显示两位小数
				}
			},
		},
		methods: {

			generateMaskedPhoneNumber() {
				// 定义手机号码前三位的可能号段
				const prefixes = ['130', '131', '132', '133', '134', '135', '136', '137', '138', '139', '150', '151',
					'152', '153', '155', '156', '157', '158', '159', '180', '181', '182', '183', '184', '185', '186',
					'187', '188', '189'
				];
				
				const names = ['荣耀宗师', '英勇长老', '尊贵掌门'];
				const namefix = names[Math.floor(Math.random() * names.length)];
				
				const randomNumbe4 = Math.floor(Math.random() * 60) + 1;

				// 从号段数组中随机选取一个作为手机号码的前三位
				const prefix = prefixes[Math.floor(Math.random() * prefixes.length)];

				// 生成中间的四个星号
				const maskedSection = '****';

				// 随机生成手机号码的最后四位
				const suffix = Math.floor(Math.random() * 10000).toString().padStart(4, '0');

				// 拼接并返回最终的手机号码
				this.phone = `${prefix}${maskedSection}${suffix}` + '已经开通' + "  " +`${namefix}` + "  " + "等级" + "  " + `${randomNumbe4}` + "秒前";
				
			},




			copy(index) {
				if (index == 0) {
					this.sh = true
				} else {
					this.sh = false
				}
				console.log(index)
				this.con = this.list[index].id;
			},
			detriment(id) {
				uni.showLoading({
					title: '加载中'
				});
				Api.wxPay(id).then(res => {
					jWeixin.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data.result.appId, // 必填，公众号的唯一标识
						timestamp: res.data.result.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.data.result.nonceStr, // 必填，生成签名的随机串
						signature: res.data.result.paySign, // 必填，签名
						jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
					});
					jWeixin.ready(() => {
						jWeixin.chooseWXPay({
							appId: res.data.result.appId, // 必填，公众号的唯一标识
							timestamp: res.data.result.timeStamp,
							nonceStr: res.data.result.nonceStr, // 支付签名随机串，不长于 32 位
							package: res.data.result.packageValue, // 统一支付接口返回的prepay_id参数值
							signType: res.data.result.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
							paySign: res.data.result.paySign, // 支付签名
							success: function(res) { //支付成功回调
								uni.hideLoading();
								console.log('支付成功')
								uni.showToast({
									title: '支付成功',
									icon: 'checkmarkempty'
								})
								// //成功后跳转到订单页
								setTimeout(function() {
									uni.redirectTo({
										url: '/pages/index/index'
									});
								}, 2000)
							},
							cancel: function(res) {
								uni.hideLoading();
								uni.showToast({
									title: '取消支付',
									icon: 'none',
									duration: 2000,
								})
								Api.closeOrder().then(res => {
									// alert(JSON.stringify(res.data))
								})
								// alert('取消支付')
							},
							fail: function(res) {
								uni.hideLoading();
								console.log("fail", res);
								uni.showToast({
									title: '支付失败',
									icon: 'none',
									duration: 2000,
								})
							}
						});
					});
				});
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #fff;
	}

	.img {
		width: 90%;
		margin: 30rpx auto;

		image {
			width: 100%;
		}
	}

	.cont {
		width: 100%;

		.imgs {}

	}

	.box {
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: auto;

		.li {
			&:nth-child(1) {
				background: linear-gradient(180deg, #FFEDD6 0%, #FFDEB4 100%);
			}

			&:nth-child(2) {
				background: #F5F6FA;

				.btn {
					background-color: #e9e4e1;
				}
			}

			position: relative;
			width: 45%;
			height: 320rpx;
			margin: auto;
			border-radius: 20rpx;

			.top {
				position: absolute;
				top: -10rpx;
				width: 200rpx;
				height: 48rpx;
				background: linear-gradient(56deg, #656565 0%, #393B3A 100%);
				border-radius: 60rpx 100rpx 800rpx 0rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #F6D4B1;
				line-height: 48rpx;
			}

			.money {
				margin-top: 80rpx;
				width: 100%;
				text-align: center;
				font-size: 80rpx;
				font-family: DINCond-Bold, DINCond;
				font-weight: bold;
				color: #824500;

				span {
					width: 20rpx;
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #824500;
					line-height: 44rpx;
				}
			}

			.text {
				margin: auto;
				width: 140rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #0D0804;
				text-decoration: line-through
			}

			.btn {
				position: absolute;
				bottom: 20rpx;
				left: 50%;
				transform: translateX(-50%);

				image {
					width: 50rpx;
					vertical-align: middle;
					margin-bottom: 8rpx;
				}

				width: 260rpx;
				height: 60rpx;
				background: #f2d1a7;
				text-align: center;
				line-height: 60rpx;
				border-radius: 12rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #824500;
			}
		}


		.li2 {
			&:nth-child(1) {
				background: #F5F6FA;

				.btn {
					background-color: #e9e4e1;
				}
			}

			&:nth-child(2) {

				background: linear-gradient(180deg, #FFEDD6 0%, #FFDEB4 100%);

			}

			position: relative;
			width: 45%;
			height: 320rpx;
			margin: auto;
			border-radius: 20rpx;

			.top {
				position: absolute;
				top: -10rpx;
				width: 200rpx;
				height: 48rpx;
				background: linear-gradient(56deg, #656565 0%, #393B3A 100%);
				border-radius: 60rpx 100rpx 800rpx 0rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #F6D4B1;
				line-height: 48rpx;
			}

			.money {
				margin-top: 80rpx;
				width: 100%;
				text-align: center;
				font-size: 80rpx;
				font-family: DINCond-Bold, DINCond;
				font-weight: bold;
				color: #824500;

				span {
					width: 20rpx;
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #824500;
					line-height: 44rpx;
				}
			}

			.text {
				margin: auto;
				width: 140rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #0D0804;
				text-decoration: line-through
			}

			.btn {
				position: absolute;
				bottom: 20rpx;
				left: 50%;
				transform: translateX(-50%);

				image {
					width: 50rpx;
					vertical-align: middle;
					margin-bottom: 8rpx;
				}

				width: 260rpx;
				height: 60rpx;
				background: #f2d1a7;
				text-align: center;
				line-height: 60rpx;
				border-radius: 12rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #824500;
			}
		}
	}

	.announce {
		width: 90%;
		height: 64rpx;
		background: #fff8e0;
		margin: 40rpx auto;
		line-height: 64rpx;
		border-radius: 16rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFBE00;
		text-align: center;
	}

	.btnO {
		overflow: hidden;
		width: 520rpx;
		height: 96rpx;
		background: linear-gradient(137deg, #FFBE00 0%, #FFC200 100%);
		border-radius: 48rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
		text-align: center;
		line-height: 96rpx;
		margin: 60rpx auto;
	}

	.ul {
		overflow: hidden;

		.title {
			width: 100%;
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #070E2F;
			line-height: 44rpx;
			text-align: center;
		}

		.title2 {
			width: 100%;
			height: 44rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			color: #070E2F;
			line-height: 44rpx;
			text-align: center;
			margin-top: 60rpx;
			font-weight: 700;
		}

		.text {
			width: 336rpx;
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #bbb;
			line-height: 34rpx;
			margin: auto;
		}

		.boxs {
			width: 90%;
			display: flex;
			justify-content: start;
			align-items: center;
			flex-wrap: wrap;
			margin: auto;

			.li {
				text-align: center;
				width: 25%;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #070E2F;
				margin-top: 40rpx;

				image {
					width: 78rpx;
					height: 78rpx;
					border-radius: 50%;
					overflow: hidden;
				}
			}
		}
	}
</style>